import Step from './steps/Step'
import styles from './index.less'
import { useEffect, useState } from 'react'
import { generateSteps } from './step'

let startX = 0
let startY = 0
let zoomMin = 0.2
let zoomMax = 1.5

const Index = () => {
  const [scale, setScale] = useState(1)
  const [height, setHeight] = useState(2850)
  const [width, setWidth] = useState(1625)
  const [top, setTop] = useState(0)
  const [left, setLeft] = useState(0)
  const [dragging, setDragging] = useState(false)
  const [steps, setSteps] = useState([])
  const [links, setLinks] = useState([])

  useEffect(() => {
    const [stepData, linkData] = generateSteps()
    setSteps(stepData)
    setLinks(linkData)
  }, [])

  const onMouseDown = (e: { clientX: any; clientY: any }) => {
    const { clientX, clientY } = e

    startX = clientX
    startY = clientY

    !dragging && setDragging(true)
  }

  const onMouseMove = (e) => {
    const { clientX, clientY } = e

    if (dragging) {
      setTop(top + clientY - startY)
      setLeft(left + clientX - startX)
      startX = clientX
      startY = clientY
    }
  }

  const onMouseUp = (e) => {
    const { clientX, clientY } = e

    setTop(top + clientY - startY)
    setLeft(left + clientX - startX)

    dragging && setDragging(false)
  }

  const onZoomIn = () => {
    if (scale < zoomMax) {
      setScale(scale + 0.1)
    }
  }

  const toggleToFit = () => {
    setScale(scale === 1 ? 0.3 : 1)
  }

  const onZoomOut = () => {
    if (scale > zoomMin) {
      setScale(scale - 0.1)
    }
  }

  return (
    <div className={styles.workflowEditor}>
      <div onMouseDown={onMouseDown} onMouseMove={onMouseMove} onMouseUp={onMouseUp} className={dragging ? styles.workflowEditorCanvasDragging : styles.workflowEditorCanvas}>
        <div
          className={styles.workflowEditorCanvasInner}
          style={{
            transform: `scale(${scale})`,
            height: `${height}px`,
            width: `${width}px`,
            top: `${top}px`,
            left: `${left}px`,
          }}
        >
          <div>
            <svg className={styles.links}>
              {links.map(({ path, dash }, idx) =>
                dash ? (
                  <path
                    d={path}
                    key={idx}
                    style={{
                      strokeDasharray: '4, 12',
                    }}
                  />
                ) : (
                  <path d={path} key={idx} />
                ),
              )}
            </svg>
            <div className={styles.steps}>
              {steps.map(({ id, type, top, left, width }) => (
                <Step step={type} top={top} left={left} width={width} key={top + left + id} />
              ))}
            </div>
          </div>
        </div>
      </div>
      <ZoomWidget scale={Number(scale.toFixed(10))} onZoomIn={onZoomIn} onZoomOut={onZoomOut} toggleToFit={toggleToFit} />
    </div>
  )
}

const ZoomWidget = (props) => {
  const { onZoomIn, onZoomOut, toggleToFit, max = zoomMax, min = zoomMin, scale } = props

  console.log(props)

  return (
    <div className={styles.zoomWidget}>
      <button className={scale >= max ? styles.zoomInDisabled : styles.zoomIn} title="Zoom in" onClick={onZoomIn}>
        <i className={'iconfont icon-add'} />
      </button>

      <button className={styles.zoomToggleToFit} title="Zoom to fit" onClick={toggleToFit}>
        {scale === 1 ? <i className={'iconfont icon-min'} /> : <i className={'iconfont icon-fit'} />}
      </button>

      <button className={scale <= min ? styles.zoomOutDisabled : styles.zoomOut} title="Zoom in" onClick={onZoomOut}>
        <i className={'iconfont icon-minus'} />
      </button>
    </div>
  )
}

export default Index
